<template>
    <el-dialog v-model="show" title="选择图标" center width="800">
        <div class="icon-list-view">
            <el-icon v-for="item in icons" class="icon-item" @click="selectTheIcon(item)">
                <component :is="item" />
            </el-icon>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const $emit = defineEmits(['selectIcon'])
const show = ref(false);
const icons = ref([]);

const openIconSelect = () => {
    show.value = true;
}

const selectTheIcon = (icon) => {
    $emit('selectIcon', icon)
    show.value = false;
}

onMounted(() => {
    if (icons.value.length == 0) {
        for (const key in ElementPlusIconsVue) {
            icons.value.push(key);
        }
    }
});

defineExpose({
    openIconSelect,
});
</script>

<style scoped>
.icon-list-view {
    display: grid;
    /* 使用网格布局 */
    grid-template-columns: repeat(auto-fill, 30px);
    /* 每行自动填充，每个格子宽度为40px */
    grid-auto-rows: 30px;
    /* 每行的高度为40px */
    gap: 10px;
    /* 格子之间的间距为10px */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.icon-item {
    font-size: 30px;
    padding: 3px;
    background: #f5f5f5;
    box-shadow: 0 0 6px #00000048;
    transition: all 0.3s ease;
    cursor: pointer;
}

.icon-item:hover {
    color: #148962;
    transform: scale(1.2);
}
</style>
